[class*="vcu-"] {
  box-sizing: border-box;

  &:after,
  &:before,
  *:after,
  *:before {
    box-sizing: border-box;
  }
}

body {
  margin               : 0;
  line-height          : 1.5;
  font-variant         : tabular-nums;
  font-feature-settings: 'tnum';
}

.vcu-primary-color {
  color: @vcu-primary-color;
}

.vcu-success-color {
  color: @vcu-success-color;
}

.vcu-info-color {
  color: @vcu-info-color;
}

.vcu-warning-color {
  color: @vcu-warning-color;
}

.vcu-danger-color {
  color: @vcu-danger-color;
}

.vcu-perfect-color {
  color: @vcu-table-header-background-color;
}

// 24 栅格布局
/* 
.vcu-row {
  $spans: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
          37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,
          70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%;
  &:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
  @for $index from 0 to length($spans) {
    & > .vcu-col--#{$index + 1} {
      float: left;
      width: nth($spans, $index + 1);
    }
  }
} */

/*animat*/
.t--animat {

  .vcu-sort--asc-btn,
  .vcu-sort--desc-btn,
  .vcu-filter--btn {

    &:before,
    &:after {
      .animatTransition(border);
    }
  }

  .vcu-input--wrapper {
    .vcu-input {
      .animatTransition(border);
    }
  }

  .vcu-table--expand-btn,
  .vcu-tree--node-btn {
    .animatTransition(transform);
  }

  .vcu-checkbox,
  .vcu-radio {
    >input {
      &:checked+span {
        .animatTransition(background-color);
      }
    }
  }
}

/* bg-color */
.vcu-table-bg-color() {
  &.bg-red {
    background-color: red;
    color           : #fff;
  }

  &.bg-blue {
    background-color: blue;
    color           : #fff;
  }

  &.bg-green {
    background-color: green;
    color           : #fff;
  }

  &.bg-cyan {
    background-color: cyan;
    color           : #fff;
  }

  &.bg-purple {
    background-color: purple;
    color           : #fff;
  }

  &.bg-magenta {
    background-color: magenta;
    color           : #fff;
  }

  &.bg-aqua {
    background-color: aqua;
    color           : #fff;
  }

  &.bg-lime {
    background-color: lime;
    color           : #fff;
  }

  &.bg-orange {
    background-color: orange;
    color           : #fff;
  }

  &.bg-mistyrose {
    background-color: mistyrose;
    color           : @vcu-font-color;
  }

  &.bg-cornsilk {
    background-color: cornsilk;
    color           : @vcu-font-color;
  }

  &.bg-palegreen {
    background-color: palegreen;
    color           : @vcu-font-color;
  }

  &.bg-lightcyan {
    background-color: lightcyan;
    color           : @vcu-font-color;
  }

  &.bg-lightskyblue {
    background-color: lightskyblue;
    color           : @vcu-font-color;
  }

  &.bg-lavender {
    background-color: lavender;
    color           : @vcu-font-color;
  }

  &.bg-pink {
    background-color: pink;
    color           : @vcu-font-color;
  }

  &.bg-lightcoral {
    background-color: lightcoral;
    color           : @vcu-font-color;
  }

  &.bg-mediumpurple {
    background-color: mediumpurple;
    color           : @vcu-font-color;
  }
  &.bg-darkgray {
    background-color: darkgray;
    color           : @vcu-font-color;
  }
}